<template>
	<view>
		<u-overlay :show="showDialog" @click="onClickHide" root-portal :z-index="99999">
			<view class="overlay-container">
				<view class="dialog-container">
					<view class="title-container">
						<text>{{ title }}</text>
						<icon v-if="closeBtn" class="close-icon" type="icon-guanbi" :size="26" @tap.stop.prevent="close"></icon>
					</view>
					<view class="content-container">
						<slot></slot>
					</view>
					<view class="footer-btns">
						<view class="foot-btn" v-if="cancelBtn" @tap.stop.prevent="cancel">{{ cancelBtnText }}</view>
						<view class="foot-btn" v-if="confirmBtn" @tap.stop.prevent="confirm">{{ confirmBtnText }}</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showDialog: false
		};
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '提示'
		},
		closeBtn: {
			type: Boolean,
			default: false
		},
		cancelBtn: {
			type: Boolean,
			default: true
		},
		confirmBtn: {
			type: Boolean,
			default: true
		},
		cancelBtnText: {
			type: String,
			default: '取消'
		},
		confirmBtnText: {
			type: String,
			default: '确定'
		},
		closeOnClickOverlay: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		onClickHide() {
			if (!this.closeOnClickOverlay) {
				return;
			}
			this.close();
		},
		close() {
			// this.setData({
			// 	showDialog: false
			// });
			this.showDialog = false;
			this.$emit('close');
		},
		confirm() {
			this.$emit('confirm');
		},
		cancel() {
			this.close();
			this.$emit('cancel');
		}
	},
	created: function () {},
	watch: {
		show: {
			handler: function (value) {
				// this.setData({
				// 	showDialog: value
				// });
				this.showDialog = value;
			},

			immediate: true
		}
	}
};
</script>
<style>
.overlay-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.dialog-container {
	width: 600rpx;
	background: #ffffff;
	border-radius: 16rpx;
}

.dialog-container .title-container {
	display: flex;
	align-items: center;
	height: 88rpx;
	background: #f6f7fa;
	border-radius: 16rpx 16rpx 0px 0px;
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1e253f;
	padding: 0 24rpx 0 32rpx;
}

.title-container .close-icon {
	margin-left: auto;
}

.footer-btns {
	display: flex;
	align-items: center;
}

.footer-btns .foot-btn {
	flex: 1;
	display: flex;
	justify-content: center;
	font-size: 36rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #4b5680;
	padding: 24rpx 0;
	border-top: 1rpx solid #e1e2e7;
}

.footer-btns .foot-btn:last-child {
	color: #3f64fa;
}

.footer-btns .foot-btn:nth-child(2) {
	border-left: 1rpx solid #e1e2e7;
}
</style>